<template>
    <div>
        <!-- 导航 -->
        <van-nav-bar   fixed=true  placeholder=true title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- 订单商品卡片 -->
        <van-card v-bind:price="product.price" v-bind:desc="product.description" v-bind:thumb="product.imageUrls[0]" />
        <!-- 地址信息 -->
        <van-cell-group>
            <van-cell v-bind:value="user.address" title="地址" icon="location-o" @click="choseAddress" />
            <van-cell v-bind:value="user.phone" title="电话" icon="phone-o" />
            <van-cell v-bind:value=product.guarentee title="保证金：¥" />
        </van-cell-group>
        <!-- 租用天数 -->
        <van-field v-model="days" type="digit" label="租用天数" placeholder="请输入租用天数" @input="inputchange" />
        <!-- 提交栏 -->
        <van-submit-bar v-bind:price="totalPrice" button-text="提交订单" @submit="submit_order" v-bind:loading="showLoading"
            v-bind:disabled="disablesubmit" @submit.once="check" />
    </div>

</template>

<script>
import { Toast } from 'vant';
export default {
    data() {
        return {
            showLoading: false,
            jihuiaddress: '',
            product: {
                id: 0,
                description: "",
                price: 0,
                guarentee: 0,
                imageUrls: [],
                createrId: 0,
            },
            user: {
                id: 1,
                address: this.$store.state.orderAdress,
                phone: this.$store.state.orderTel,
                balance: 0,
            },
            totalPrice: 0,
            days: "",
            disablesubmit: false
        }
    },
    methods: {
        init() {
            //获取订单商品
            this.axios({
                method: "get",
                url: "/aapi/goods",
                params: {
                    id: this.$store.state.productId,
                }
            }).then(response => {
                this.product.id = response.data.id
                this.product.description = response.data.description
                this.product.price = response.data.price
                this.product.guarentee = response.data.guarentee
                this.product.imageUrls = response.data.imageUrls
                this.product.createrId = response.data.createrId
            })
            //获取买家信息
            this.axios({
                method: "GET",
                url: "/aapi/me"
            }).then(response => {
                this.user.id = response.data.uid
                this.user.balance = response.data.balance
                // 获取初始地址电话信息
                this.axios({
                    method: "GET",
                    url: "/aapi/addresslist",
                }).then((response) => {
                    this.$store.commit("changeOderAdress", response.data[0].address)
                    this.$store.commit("changeOrderTel", response.data[0].tel)
                });

            }).catch(error => {
                if (error.response.status == 401)
                    Toast.fail("请先登录")
            })
        },
        inputchange(e) {
            if (e <= 30 && e > 0) {
                this.disablesubmit = false
                this.totalPrice = (this.product.price * this.days + this.product.guarentee) * 100
            } else if (e > 30) {
                this.disablesubmit = true
                Toast.fail('租用天数不能大于30');
            } else if (e == "") {
                this.disablesubmit = true
                Toast.fail('租用天数不能为空');
            }
            else {
                this.disablesubmit = true
                Toast.fail('租用天数不能小于0');
            }
        },
        submit_order() {
            this.showLoading = true;
            if(this.user.address == ""||this.user.tel==""){
                Toast.fail('请填写地址');
                this.showLoading = false
            }else if (this.totalPrice / 100 > this.user.balance) {
                Toast.fail('余额不足');
                this.showLoading = false
            }else {
                // 获取卖家信息
                this.axios({
                    method: "get",
                    url: '/aapi/user',
                    params: {
                        id: this.product.createrId,
                    }
                }).then(response => {

                    this.jihuiaddress = response.data.address
                    this.axios({
                        method: 'post',
                        url: '/aapi/createorder',
                        data: {
                            useruid: this.user.id,
                            maijiauid: this.product.createrId,
                            productId: this.product.id,
                            fahuoaddress: this.user.address,
                            jihuiaddress: this.jihuiaddress,
                            status: 0,
                            days: this.days,
                            totalPrice: this.totalPrice / 100,
                        }
                    }).then(response => {
                        // 更新账户余额
                        this.axios({
                            method: "put",
                            url: "aapi/me",
                            data: {
                                balance: this.user.balance - this.totalPrice / 100
                            }
                        }).then(res => {
                            this.$router.push("/gerenzhuye")
                            this.showLoading = false;
                        })

                    }

                    )
                })
            }



        },
        onClickLeft() {
            this.$router.go(-1)
        },
        choseAddress() {
            this.$router.push("/addresslist")
        }
    },
    created() {
        this.disablesubmit = true
        this.init()
        this.totalPrice = (this.product.price * this.days + this.product.guarentee) * 100
    }
}
</script>
<style>
</style>